.from {
  min-height: 100vh;
  padding-bottom: 70px;
  background-color: #f4f4f4;

  .fromtitle {
    height: 50px;

    .van-nav-bar {
      height: 50px;
      border-bottom: 1px solid #f4f4f4;
    }
  }

  .from-body {
    .van-tab__pane {
      padding: auto 10px;
      margin-top: 15px;
    }

    .van-tabs {
      .van-tab {
        .van-tab__text {
          width: 100%;
          height: 100%;

          .typeDesc {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
          }
        }
      }

      .van-sticky {
        margin-bottom: 15px;
      }
    }

    .tab-item {
      padding: 0 0.26667rem 0.26667rem 0.26667rem;
      background-color: #ffffff;
      border-radius: 5px;
      width: 90%;
      margin: 0 auto 0.26667rem;

      .fl {
        float: left;
      }

      .fr {
        float: right;
      }

      .tab-item-box {
        border-bottom: 1px solid #a5a4a4;

        .fr {
          margin-right: 10px;
        }

        .no,
        .text {
          color: #999;
          font-size: 14px;
          line-height: 40px;
        }

        .no {
          font-size: 10px;
        }

        .text,
        .finished {
          color: #0c34ba;
          font-weight: 700;
        }
        .text-box-tab {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          line-height: 40px;
          .remove {
            width: 20px;
            height: 20px;
            background-color: #fc5430;
            line-height: 20px;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            font-size: 19px;
            font-weight: 700;
            margin-left: 15px;
          }
        }
      }

      .order-box {
        border-bottom: 1px dashed #767474;

        .cell-box {
          margin-bottom: 10px;
          padding: 10px;
          .pro-img {
            img {
              width: 75px;
            }
          }

          .pro-info {
            margin-left: 5px;
            width: 65%;

            .text-box {
              .text-name {
                font-size: 16px;
              }

              .text-rule {
                color: #999;
                margin-left: 10px;
              }

              .text-enname {
                margin-top: 5px;
                margin-bottom: 10px;
                color: #999;
              }
            }

            .price-box {
              font-size: 16px;

              .text-price {
                color: #0c34ba;
              }
              .text-num {
                color: #decfb5;
              }
            }
          }
        }

        .pro-box {
          margin-top: 10px;

          .pro-boxing {
            .date {
              color: #999;
              font-size: 10px;
              // line-height: 40px;
            }
            .clearfix {
              margin: 10px auto;
              .pro-total {
                color: #0c34ba;
              }
            }
          }
        }
      }
    }
  }
}

/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

/* after 清除浮动 */
.clearfix::after {
  clear: both;
}
